<template>
    <view>

        <!-- color：主题色 addressList:地址管理数据 @chooseClick：选择事件 @editClick：编辑事件  -->
        <cc-addressSet v-if="addAddressShow && addressData.id==''" @delClick="delAddress" :colors="colors" :addressList="addressList" @chooseClick="chooseClick"
            @editClick="editClick"></cc-addressSet>
		<view v-else>
			<view class="autoAddress">
				<yk-AutoReco @selectAddress="selectAddress" :bgColor="colors" fontColor="#ffffff"></yk-AutoReco>
			</view>
			<view class="addressBox">
				<view class="addressItem">
					<view class="label">地址</view>
					<u--input
					  placeholder="请输入内容"
					  border="surround"
					  v-model="addressData.city"
					></u--input>
				</view>
				
				<view class="addressItem">
					<view class="label">详情</view>
					<u--input
					  placeholder="请输入内容"
					  border="surround"
					  v-model="addressData.addr"
					></u--input>
				</view>
				
				<view class="addressItem">
					<view class="label">收货人</view>
					<u--input
					  placeholder="请输入内容"
					  border="surround"
					  v-model="addressData.name"
					></u--input>
				</view>
				<view class="addressItem">
					<view class="label">手机号</view>
					<u--input
					  placeholder="请输入内容"
					  border="surround"
					  v-model="addressData.mobile"
					></u--input>
				</view>
				  
			</view>
		</view>
		
        <view class="save">
            <view v-if="addAddressShow && addressData.id==''" class="btn" :style="'background:' + colors" @tap="addAddress">添加收货地址</view>
			<view v-else-if="addAddressShow && addressData.id" class="btn" :style="'background:' + colors" @tap="editAddress">编辑收货地址</view>
			<view v-else class="btn" :style="'background:' + colors" @click="queding">确认收货地址</view>
        </view>
		
		
    </view>
</template>

<script>
	import ykAutoReco from '@/components/yk-AutoReco/yk-AutoReco';
    export default {
		components:{
			ykAutoReco
		},
		data(){
			return{
				addressData:{
					id:'',
					addr:'',
					city:'',
					mobile:'',
					name:'',
				}
			}
		},
        props: {
			colors: {
				type: String,
				default:'#fbbd08'
			},
			addAddressShow:{
				type: Boolean,
				default:true
			},
			addressList: {
				type: Array,
				default () {
					return [];
				}
			}
		},

        methods: {
			queding(){
				let that = this
				this.tui.request("/basic-capi/address/addUserAddress", "post",
					
					{
						...this.addressData,
						openid:uni.getStorageSync('userInfo').openid
					}
				).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.message
						})
						this.$emit('settingAddress',true,'addSuccess')
					}else{
						uni.showToast({
							title:res.message
						})
						if(res.message == '请填写您得收货地址再购买!'){
							this.$emit('settingAddress',true,'')
						}
					}
					
				})
			},
			selectAddress(value) { 
		 
				this.addressData.city =  `${value.province}${value.city}${value.area}`
				this.addressData.addr = value.addr
				this.addressData.mobile = value.mobile || value.phone
				this.addressData.name = value.name
			},
			delAddress(item,index){
				this.tui.request("/basic-capi/address/deleteUserAddress", "post",
					{
						id:item.id,
						openid:uni.getStorageSync('userInfo').openid
					}
				).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.message
						})
					}
					
				})
				this.$emit('delAddress',item)
			},
            // 编辑地址
            editClick(item) {
				this.addressData = {
					id:item.id,
					addr:item.moreAddres,
					city:item.address,
					mobile:item.phone,
					name:item.name,
				}
				this.$emit('settingAddress',true,'')
          
            },
			editAddress(){
				let that = this
				this.tui.request("/basic-capi/address/editUserAddress", "post",
					
					{
						...this.addressData,
						openid:uni.getStorageSync('userInfo').openid
					}
				).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.message
						})
						this.addressData = {
							id:'',
							addr:'',
							city:'',
							mobile:'',
							name:'',
						}
						this.$emit('settingAddress',true,'addSuccess')
					}
					
				})
			},
            chooseClick(item){
                this.tui.request("/basic-capi/address/useUserAddress", "post",
                	{
                		id:item.id,
                		openid:uni.getStorageSync('userInfo').openid
                	}
                ).then(res=>{
                	if(res.code == 200){
                		uni.showToast({
                			title:res.message
                		})
						this.$emit('settingAddress',true,'addSuccess',item)
                	}
                	
                })
                
            },
            // 增加地址
            addAddress() {
				this.$emit('settingAddress',false,'')
            },
        }
    };
</script>
<style lang="scss" scoped>
    .save {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 120upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .save view {
        display: flex;
    }

    .save .btn {
        box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
        width: 70%;
        height: 80upx;
        border-radius: 80upx;
        background-color: #f23a3a;
        color: #fff;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        margin-bottom: 60px;
    }
	.autoAddress{
		border: 1px solid #ccc;
	}
	.addressBox{
		display: flex;
		// align-items: center;
		flex-direction: column;
		gap:16rpx;
		margin-top: 20rpx;
		padding: 12rpx;
		.addressItem{
			display: flex;
			gap: 16px;
			align-items: center;
			.label{
				color: rgba(0, 0, 0, 0.4);
				width: 90rpx;
			}
		}
	}
</style>